<template>
<div class="zt">
    <!-- 内容区 -->
    <div class="ZTcontent">
        <!-- el表格 -->
        <div class="tdck_table">
            <el-table :header-cell-style="{background:'#EBF1FC',color:'#606266'}" :data="simDetail" border stripe style="width: 100%">
                <el-table-column prop="id" label="序号" width="60">
                </el-table-column>
                <el-table-column prop="szIpAddr" label="IP地址">
                </el-table-column>
                <el-table-column prop="deviceId" label="主机ID">
                </el-table-column>
                <el-table-column prop="isignalStrength" label="信号强度">
                </el-table-column>
                <el-table-column prop="isignalBar" label="信号值">
                    <template slot-scope="scope">
                        <span style="width:16px !important;height:16px !important; display:inline-block;" :class="setBarClass( scope.row.isignalBar) ">
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="inetworkSystem" label="网络制式">
                </el-table-column>
                <el-table-column prop="icarrierOperator" label="运营商信息">
                </el-table-column>
                <el-table-column prop="modemManufacturer" label="模块厂商">
                </el-table-column>
                <el-table-column prop="modemVersion" label="模块版本">
                </el-table-column>
                <el-table-column prop="relationStatus" label="SIM卡状态">
                    <template slot-scope="scope">
                        <span style="width:16px !important;height:16px !important; display:inline-block;" :class="scope.row.relationStatus == 391 ? 'notbind': scope.row.relationStatus == 392 ? 'notPut':'isbind'">
                        </span>
                        <span>
                            {{scope.row.relationStatus == 391 ? '未绑定': scope.row.relationStatus == 392 ? '未入库':'已绑定'}}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="ZTfooter">
            <span>共{{ infoTotal }}条</span>
            <el-select v-model="numVal" @change="pageTotalChange">
                <el-option v-for="item in num" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-pagination layout="prev, pager, next" :total="this.totalPage" :current-page="currenPage" :page-size="this.pageSize" @current-change="handleCurrentChange">
            </el-pagination>
            <div class="goPage">
                <span>前往</span>
                <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="pageNumber" placeholder="1"></el-input>
                <span>页</span>
                <el-button class="goPageBtn" type="goon" @click="goPage">确定</el-button>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            num: [{
                value: 20,
                label: '20条/页'
            }, {
                value: 50,
                label: '50条/页'
            }, {
                value: 100,
                label: '100条/页'
            }],
            numVal: 20,
            pageNumber: "",
            infoTotal: 100,
            currenPage: 1,
            totalPage: 100,
            pageSize: 10,
            simDetail: [],
            operator_statusCode: {
                '-1': "未知",
                0: "中国联通",
                1: "中国移动",
                2: "中国电信"
            },
            system_statusCode: {
                '-1': "未知",
                1: "WCDMA",
                2: "EVDO",
                3: "TD-SCDMA",
                4: "TDD-LTE",
                5: "FDD-LTE",
                6: "GPRS",
                7: "CDMA1X"
            },
            strength_statusCode: {
                '-1': '未知',
                0: '弱',
                1: '一般',
                2: '强'
            },
        }
    },
    created() {
        this.changePageList(1, this.numVal);
    },
    methods: {
        handleCurrentChange(val) {
            this.currenPage = val;
            this.changePageList(val, this.numVal);
        },
        pageTotalChange(val) {
            this.totalPage = Math.ceil(this.infoTotal / val);

            this.changePageList(1, val);
        },
        pageReset() {
            this.changePageList(this.currenPage, this.numVal);
        },
        goPage(){
        // console.log("this.totalPage",this.totalPage,this.pageSize,this.pageNumber,this.currenPage);
            if(this.totalPage<=this.pageSize){
                this.pageNumber =  this.currenPage = 1;
            }else{
            //判断一共有多少页
            let page = Math.ceil(this.totalPage/this.pageSize);
            this.pageNumber = this.pageNumber>page?page:this.pageNumber;
            this.currenPage = Number(this.pageNumber) ;
            }
            this.changePageList(this.pageNumber,this.numVal)
        },
        changePageList(page, limit) {
            let _this = this;
            _this.$axios
                .get("sim/page/" + page + "/" + limit)
                .then((res) => {
                    let data = res.data.data;
                    let records = data.records;
                    _this.infoTotal = data.total;
                    _this.totalPage = _this.infoTotal;
                    _this.pageSize = _this.numVal;
                    _this.simDetail = [];
                    for (let i = 0; i < records.length; i++) {
                        let sim = records[i];
                        _this.simDetail.push({
                            id: (page - 1) * limit + 1 + i,
                            deviceId: sim.deviceId,
                            szIccid: sim.szIccid,
                            szIpAddr: sim.szIpAddr,
                            modemModel: sim.modemModel,
                            modemManufacturer: sim.modemManufacturer,
                            modemVersion: sim.modemVersion,
                            collectTime: sim.collectTime,
                            icarrierOperator: _this.operator_statusCode[sim.icarrierOperator],
                            inetworkSystem: _this.system_statusCode[sim.inetworkSystem],
                            isignalStrength: _this.strength_statusCode[sim.isignalStrength],
                            isignalBar: sim.isignalBar,
                            isignaldBm: sim.isignaldBm,
                            relationStatus: sim.relationStatus,
                        });
                    }

                    //
                })
                .catch();
        },
        setBarClass(val) {
            if (val == 5) return 'bar_five';
            else if (val == 4) return 'bar_four';
            else if (val == 3) return 'bar_three';
            else if (val == 2) return 'bar_two';
            else if (val == 1) return 'bar_one';
            else return 'bar_none';
            return
        }
    }
}
</script>

<style scoped>
/* 内容区底部样式 */
.goPage>button:hover {
    cursor: pointer;
}

.goPage>button {
    width: 60px;
    height: 30px;
    background: #3C74E3;
    border-radius: 4px;
    border: none;
    color: #FFFFFF;
}

.goPage>span:nth-of-type(2) {
    padding-left: 48px;
    padding-right: 8px;
}

.goPage>span:nth-of-type(1) {
    padding-right: 8px;
}

.ZTfooter>.goPage {
    position: absolute;
    right: 10px;
    top: 10px;
}

.goPage>>>.el-input {
    width: 0 !important;
}

.goPage>.el-input>>>.el-input__inner {
    width: 40px !important;
    height: 30px !important;
    padding: 0 5px !important;
}

.el-pagination {
    position: absolute;
    right: 190px;
    top: 10px;
}

.ZTfooter>.el-select>>>.el-input__icon {
    line-height: 30px !important;
}

.ZTfooter>.el-select>>>.el-input__inner {
    width: 100px;
    height: 30px;
}

.ZTfooter>span:nth-of-type(1) {
    margin-right: 16px;
}

.ZTfooter {
    height: 44px;
    display: flex;
    align-items: center;
    border-top: 1px solid #CCCCCC;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    padding: 0 16px;
    margin-top: 4px;
    position: relative;
}

/* 滚动条样式 */
.ZT_table::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.ZT_table::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #3C74E3;
}

.ZT_table::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #f5f5f5;
}

/* 设备状态表列 */
.ZT_table {
    width: 100%;
    height: calc(100% - 102px);
    overflow-y: scroll;
    background-color: #fff;
}

.ZT_bg {
    background: #F5F5F5;
}

.online {
    background: url(/static/img/online.png) no-repeat;
    background-size: 15px;
    color: #16A951;
    background-position: 12px 3px;
}

.offline {
    background: url(/static/img/off-line.png) no-repeat;
    background-size: 15px;
    background-position: 12px 3px;
}

/* 设备状态表头 */
.ZT_title>span:nth-child(1) {
    width: 47px;
    border: none !important;
    text-align: center;
    padding: 0 !important;
}

/* 设备状态表格 */
.ZTcontent {
    height: calc(100% - 2px);
    background-color: #fff;
    margin-top: 8px;
    padding: 16px 16px 0 16px;
    box-sizing: border-box;
}

/* 输入搜索框 */
.el-select>>>.el-input__icon {
    line-height: 36px !important;
}

.el-select>>>.el-input__inner,
.el-input>>>.el-input__inner {
    width: 200px;
    height: 36px;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    padding-left: 8px;
    box-sizing: border-box;
}

.zt {
    height: calc(100% - 53px);
}

/* el table */
.tdck_table {
    height: calc(100% - 62px);
    overflow-y: scroll;
}

/* 滚动条样式 */
.tdck_table::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.tdck_table::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #3c74e3;
}

.tdck_table::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #f5f5f5;
}

.tdck_table>>>.table_key {
    color: #3C74E3;
    cursor: pointer;
}

.tdck_table .isbind {
    background: url(../../static/img/393.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

.tdck_table .notbind {
    background: url(../../static/img/391.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

.tdck_table .notPut {
    background: url(../../static/img/392.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

.tdck_table .bar_one {
    background: url(../../static/img/bar1.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

.tdck_table .bar_two {
    background: url(../../static/img/bar2.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

.tdck_table .bar_three {
    background: url(../../static/img/bar3.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

.tdck_table .bar_four {
    background: url(../../static/img/bar4.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

.tdck_table .bar_five {
    background: url(../../static/img/bar5.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

.tdck_table .bar_none {
    background: url(../../static/img/bar0.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

/deep/ .el-table th.el-table__cell.is-leaf,
/deep/ .el-table td.el-table__cell {
    border: none !important;
}

/deep/ .el-table th {
    padding: 0 !important;
    height: 48px !important;

}

/deep/ .el-table th.el-table__cell.is-leaf .cell {
    line-height: 32px;
    border-left: 1px solid #cccccc !important;
}

/deep/ .el-table .el-table__row td {
    padding: 0 !important;
    height: 40px;
}

/deep/ .el-table .el-table__row td div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/deep/ .el-table th:nth-child(1).el-table__cell.is-leaf .cell {
    border: none !important;
}

/deep/ .el-table--border,
.el-table--group {
    border: none;
}

/deep/ .el-table .el-table__row--striped td {
    background-color: #f5f5f5 !important;
}
</style>
